<template>
  <div>
    <!-- <el-table-column>
    </el-table-column>-->
    <el-input placeholder="搜索内容关键字,支持模糊搜索" v-model="search"></el-input>
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
      <div :key="index" v-for="(item,index) in tableLabel">
        <el-table-column :key="index" :label="item" :prop="index" v-if="!(index === 'iconURL')"></el-table-column>
        <el-table-column :key="index" :label="item" :prop="index" v-if="index ==='iconURL'">
          <template v-slot="{row}">
            <img v-lazy="row.iconURL" />
          </template>
        </el-table-column>
      </div>
      <el-table-column label="操作" v-if="isShow">
        <template v-slot="{$index, row}">
          <el-button @click="handleEdit($index, row)" size="mini">编辑</el-button>
          <el-button @click="handleDelete($index, row)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableLabel: {
      type: Object,
      default() {
        return {}
      }
    },
    tableData: {
      type: Array,
      default() {
        return {}
      }
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      search: null
    }
  },
  mounted() {},
  computed: {},
  methods: {
    handleEdit(index, row) {
      // console.log(index, row)
      this.$emit('edit', row)
    },
    handleDelete(index, row) {
      // console.log(index, row)
      this.$emit('delete', row)
    }
  }
}
</script>

<style lang="scss" scoped>
img[lazy='loading'] {
  width: 67px;
  height: 87px;
}
img[lazy='error'] {
  min-width: 67px;
  height: 87px;
}
</style>
